<template>
  <div class="log">
    <h4>捐献记录</h4>
    <el-collapse v-model="active" accordion>
      <template v-if="total>0" v-for="(item,index) in data" :key="index">
        <el-collapse-item :title="`${item.create_time} 总积分：${item.integral}`" :name="index">
          <div>
            <el-descriptions  :column="1" :title="item.status">

              <el-descriptions-item label="提交时间">{{item.create_time}}</el-descriptions-item>
              <el-descriptions-item label="审核人员">{{item.pass}}</el-descriptions-item>
              <el-descriptions-item label="捐献资源">
                <small>积分换算规则：当前捐献总数x资源兑换比例 = 积分</small>
                <ul>
                  <li v-for="(v,k) in item.resources" :key="k">
                    资源 <span>[ {{v.name}} ]</span> 积分={{v.total}} x <b>{{v.scale}} = {{v.value}}</b>
                  </li>
                </ul>
                <p>共计积分：{{item.integral}}</p>
              </el-descriptions-item
              >
            </el-descriptions>
          </div>
        </el-collapse-item>
      </template>
      <template v-else class="error">
        暂无记录
      </template>

    </el-collapse>
    <div class="page" v-if="total > limit">
      <el-pagination
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {GET} from "../../utils/Request";
import {onMounted} from "@vue/runtime-core";
import {ref} from "vue";

export default {
  name: "DonateLogs",
  setup(){
    const state = reactive({
      data:[],
      limit:10,
      page:1,
      total:0,
      active:ref("0")
    })
    const methods = {
      async getDonateLogs(page){
        let params = {
          limit : state.limit,
          page : page
        }
        let resp = await GET("/donate/getLogs",params);
        console.log(resp)
        state.data = resp.data.data
        state.total = resp.data.count
      },
      handleCurrentChange(val){
        methods.getDonateLogs(val)
        state.page = val
      }
    }
    onMounted(()=>{
      methods.getDonateLogs(1)
    })

    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>
.page{
  margin: 20px 0;
}
</style>